<template>
  <div class="page">
    <div class="register-title">
      <img class="img1" src="../../assets/img/regist.png" alt />
      <div class="p-bx">
        <p class="p1">BECOME A MEMBER</p>
        <p class="p2">Create an account</p>
      </div>
    </div>

    <van-cell-group>
      <p class="title">
        Truename
        <van-icon name="star" />
      </p>
      <van-field class="loginM-input-box" v-model="truename" />
      <p class="title">
        Email
        <van-icon name="star" />
      </p>
      <van-field class="loginM-input-box" v-model="email" />
      <p class="title">
        Veriflcation code
        <van-icon name="star" />
      </p>
      <van-field class="loginM-input-box" v-model="smscode">
        <p class="senBtn" slot="button" @click="getcode">{{show}}</p>
      </van-field>
      <p class="title">
        Password
        <van-icon name="star" />
      </p>
      <van-field
        class="loginM-input-box"
        v-model="passwd"
        :type="passwordtype"
        :right-icon="showpsd"
        @click-right-icon="clickEye"
      />
    </van-cell-group>
    <div
      class="regisert-tips"
    >Click ‘send’, your email is about to get the veriflcation code. Plus, please fill in the veriflcation.</div>
    <div class="loginBtn" :class="{active:btnstatu}" @click="register">BECOME A MEMBE</div>
    <p class="line"></p>
    <p class="loginM-register">
      Go back to
      <router-link class="a" to="/login">login in</router-link>
    </p>
    <p class="loginM-register" style="color: #0076ff;" @click="showXy">Privacy Policy</p>
    <van-popup class="van-popups" v-model="showDialog">
      <p class="titles">User License Agreement</p>
      <div class="xycontent">
        <div class="coentent">
          <p>ICCSINO belongs to Shanghai Xinluo Network Technology Co., Ltd.（上海鑫椤网络科技有限公司） and is a data provider in APP. It also owns the copyright of the corresponding information in this APP. Without the explicit written permission of Shanghai Xinhua Network Technology Co., Ltd., no one can copy or mirror on APP belonging to non-Shanghai Xinhua Network Technology Co., Ltd.</p>
          <p class="p1">Privacy statement</p>
          <p>We hereby declare our commitment to the protection of visitors'privacy. The following text is published in ICCSINO APP for information collection and use. The privacy declaration of our website is constantly improving. With the expansion of the scope of ICCSINO APP service, we will update our privacy declaration at any time. We welcome you to check this declaration at any time. Feedback to service@iccsino.com. At the time of agreeing to the ICCSINO Service Agreement ("Agreement"), you have agreed to use and disclose your personal information in accordance with this Privacy Statement. All terms and conditions of this Privacy Statement are part of this Agreement. When you intend to register as a member, we ask you to choose a mobile phone number and password, and provide the real name so that we can confirm your identity by phone after you lose your password. You can only use your account through your password. If you leak your password, you may lose your personal identification information and may lead to judicial actions against you. Therefore, regardless of any reason to endanger your password security, you should contact us immediately through customer service telephone. Registration Information When you are registered as a member, we require you to fill out a registration form. The registration form requires your real name, telephone number, and email address. In addition, you are asked to provide your company's address, telephone number and a brief description of your company's services and products. You also have the option to fill in additional information. This information may include your province and city, time zone and postal code, fax number, home page and your position. We use registration information to obtain membership statistics. We will use these statistics to categorize our members, such as age, industry and country, in order to provide new services and opportunities to our members. We will inform you of these new services and opportunities through your email address. We track IP addresses only for security purposes. If we do not find any security problems, we will delete the IP addresses we collected in time. We also track page access data throughout the day. Full-day page access data is used to reflect website traffic. One is that we can plan for future development (for example, adding servers). Third party our website publishes business opportunities and quotations submitted by users, while other users can inquire about these quotations and business opportunities. We will not provide, sell, rent, share and trade user's personal information to any third party unless the third party, together with China Graphite Carbon Network, provides services to websites and members and will be prohibited from accessing all such information, including those previously accessible, after the end of the service. We will disclose your information in good faith when we are compelled by law or when we provide your information in accordance with government requirements. Open transaction information You provide published information or quotation of goods for trade will be displayed in the public area, which is open to any user. Please note that all information disclosed in these places will become public information. Please consider carefully before deciding to publish your personal information. Security Our website has corresponding security measures to ensure that the information we have is not lost, abused and changed. These security measures include backing up data to other servers and encrypting user passwords. Despite these security measures, please note that there are no "perfect security measures" on the Internet.</p>
          <p class="p1">Contact us</p>
          <p>If you have any comments or suggestions on the privacy protection measures of this privacy statement or ICCSINO and the problems you are using.</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { register, requestdx, login } from "../../api/user";
import vueImgVerify from "../../components/canvasImg";
import utils from "../../assets/js/util";
import { getNowSS, objFull } from "../../assets/js/tools";
export default {
  name: "Register",
  components: {
    vueImgVerify
  },
  data() {
    return {
      showDialog: false,
      showpsd: "closed-eye",
      passwordtype: "password",
      email: "",
      passwd: "",
      smscode: "",
      truename: "",
      show: "send", //验证码对应文字
      count: 60,
      timer: 60,
      isCodeClik: false, //防止多次点击验证码
      isClick: false
    };
  },
  computed: {
    btnstatu() {
      let params = {
        email: this.email,

        passwd: this.passwd,
        smscode: this.smscode
      };
      if (objFull(params)) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    showXy() {
      this.showDialog = true;
    },
    clickEye() {
      // 条件判断  ？ A(是) ： B(否)   并返回值
      if (this.showpsd == "eye-o") {
        this.showpsd = "closed-eye";
        this.passwordtype = "password";
      } else {
        this.showpsd = "eye-o";
        this.passwordtype = "text";
      }
    },
    subductionSecond() {
      let timerSet = setInterval(() => {
        this.timer--;
        this.show = this.timer + "s后再次获取";
        if (this.timer < 0) {
          this.show = "send";
          this.isCodeClik = false;
          clearInterval(timerSet);
        }
      }, 1000);
    },
    getcode() {
      if (this.isCodeClik) {
        this.$toast("wait");
        return;
      }

      let obj = {
        aid: getNowSS(),
        email: this.email
      };

      this.isCodeClik = true;
      requestdx(obj).then(res => {
        if (res.code == "0000") {
          this.timer = this.count;
          this.show = this.timer + "s后再次获取";
          this.subductionSecond();
        } else {
          this.isCodeClik = false;
          this.$toast(res.msg);
        }
      });
    },

    register() {
      if (!this.truename) {
        this.$toast("The truename  shouldn't be empty");
        return false;
      }
      if (!this.email) {
        this.$toast("The email  shouldn't be empty");
        return false;
      }
      if (!this.smscode) {
        this.$toast("The veriflcation code shouldn't be empty");
        return false;
      }
      if (!this.passwd) {
        this.$toast("The password  shouldn't be empty");
        return false;
      }

      let params = {
        truename: this.truename,
        email: this.email,
        passwd: this.passwd,
        smscode: this.smscode
      };
      if (this.isClick) {
        return;
      }
      this.isClick = true;
      //注册成功直接登录
      register(params).then(res => {
        this.isClick = false;
        if (res.code === "0000") {
          this.$toast(res.msg);
          let loginobj = {
            uemail: this.email,
            upasswd: this.passwd
          };
          login(loginobj).then(res => {
            if (res.code == "0000") {
              this.$store.dispatch("acLoginInfor", res.data);
              this.$router.push({ path: "/" });
            } else {
              this.$toast(res.msg);
            }
          });
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import url("./form.css");
.page {
  width: 6.94rem;
  margin: 0.3rem auto;
  background: #ffffff;
  border-radius: 0.05rem;
}
.register-title {
  height: 1.68rem;
  display: flex;
  align-items: center;
  padding-left: 0.28rem;
  border-bottom: 0.01rem solid rgb(236, 236, 237);
  .img1 {
    width: 0.88rem;
    height: 0.88rem;
    margin-right: 0.28rem;
  }
  .p1 {
    font-size: 0.34rem;
    font-weight: bolder;
    color: rgba(46, 80, 96, 1);
    line-height: 0.48rem;
  }
  .p2 {
    font-size: 0.28rem;
    color: rgba(157, 169, 183, 1);
    line-height: 0.4rem;
  }
}
.van-cell-group {
  padding: 0.3rem;
}
.van-popups {
  width: 7rem;
  padding: 1.2rem 0.2rem 0.6rem;
  height: 70%;
  border-radius: 0.06rem;
  .titles {
    width: 100%;
    font-size: 0.4rem;
    text-align: center;
    line-height: 0.6rem;
    position: absolute;
    top: 0.4rem;
    left: 0;
  }
  .xycontent {
    height: 100%;
    position: relative;
    overflow: scroll;
    p {
      line-height: 1.5;
      margin-bottom: 0.2rem;
      text-align: justify;
    }
    .p1 {
      font-size: 0.3rem;
      font-weight: bold;
    }
  }
}
</style>
